@property --d {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: false;
}
@property --r {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes cutRotate {
  0% {
    --d: 0%;
  }
  100% {
    --d: 0%;
    --r: 90deg;
  }
  50% {
    --d: 20%;
  }
}
body {
  margin: 0;
  height: 100vh;
  display: grid;
  grid-auto-flow: column;
  place-content: center;
  gap: 40px;
  background: aliceblue;
}

img {
  width: 200px;
  height: 200px;
  --r: 0deg;
  --d: 0%;
  -webkit-mask: linear-gradient(var(--r), transparent var(--d), red 0 calc(100% - var(--d)), transparent 0), linear-gradient(calc(var(--r) + 90deg), transparent var(--d), red 0 calc(100% - var(--d)), transparent 0);
          mask: linear-gradient(var(--r), transparent var(--d), red 0 calc(100% - var(--d)), transparent 0), linear-gradient(calc(var(--r) + 90deg), transparent var(--d), red 0 calc(100% - var(--d)), transparent 0);
  -webkit-mask-composite: source-in;
          mask-composite: source-in;
  cursor: pointer;
  -webkit-mask-size: calc(100% / var(--n, 2)) calc(100% / var(--n, 2));
          mask-size: calc(100% / var(--n, 2)) calc(100% / var(--n, 2));
}
img:hover {
  animation: cutRotate 0.6s;
}